import { Canvas, Controls, Meta } from '@storybook/blocks';

import * as SelectStories from './Select.stories';

<Meta of={SelectStories}/>

# Select选择器
下拉选择器

## 基本使用
<Canvas of={SelectStories.Select}/>
<Controls of={SelectStories.Select}/>

## 多选模式
<Canvas of={SelectStories.SelectMultiple}/>
<Controls of={SelectStories.SelectMultiple}/>

## 虚拟滚动
<Canvas of={SelectStories.SelectVirtual}/>
<Controls of={SelectStories.SelectVirtual}/>

## API
<table className="api-table">
    <thead>
    <tr>
        <th>参数</th>
        <th>说明</th>
        <th>类型</th>
        <th>默认值</th>
    </tr>
    </thead>
    <tbody>
    <tr>
        <td>className</td>
        <td>类名class</td>
        <td>string</td>
        <td>-</td>
    </tr>
    <tr>
        <td>popupClassName</td>
        <td>下拉菜单的类名class</td>
        <td>string</td>
        <td>-</td>
    </tr>
    <tr>
        <td>empty</td>
        <td>没有选项时展示内容</td>
        <td>slot</td>
        <td>-</td>
    </tr>
    <tr>
        <td>label</td>
        <td>选中的选项展示内容，仅在单选模式时生效(scope.data为对应的option项)</td>
        <td>slot</td>
        <td>-</td>
    </tr>
    <tr>
        <td>tag</td>
        <td>选中的选项展示内容，仅在多选模式时生效(scope.data为对应的option项)</td>
        <td>slot</td>
        <td>-</td>
    </tr>
    <tr>
        <td>options</td>
        <td>选项内容</td>
        <td>`{ label, value }[]`</td>
        <td>-</td>
    </tr>
    <tr>
        <td>multiple</td>
        <td>多选模式</td>
        <td>boolean</td>
        <td>false</td>
    </tr>
    <tr>
        <td>listHeight</td>
        <td>下拉列表的总高度</td>
        <td>number</td>
        <td>256</td>
    </tr>
    <tr>
        <td>virtual</td>
        <td>开启虚拟滚动</td>
        <td>boolean</td>
        <td>false</td>
    </tr>
    <tr>
        <td>itemHeight</td>
        <td>virtual为true时必需设置，每一项的高度</td>
        <td>number | (index: number, data: any) => number</td>
        <td>-</td>
    </tr>
    <tr>
        <td>allowClear</td>
        <td>展示清除按钮</td>
        <td>boolean</td>
        <td>-</td>
    </tr>
    <tr>
        <td>autoClearSearchValue</td>
        <td>是否在选中项后清空搜索框，只在多选模式时有效</td>
        <td>boolean</td>
        <td>true</td>
    </tr>
    <tr>
        <td>autoFocus</td>
        <td>默认获取焦点</td>
        <td>boolean</td>
        <td>-</td>
    </tr>
    <tr>
        <td>bordered</td>
        <td>是否有边框</td>
        <td>boolean</td>
        <td>true</td>
    </tr>
    <tr>
        <td>placeholder</td>
        <td>选择框提示文本</td>
        <td>string</td>
        <td>-</td>
    </tr>
    <tr>
        <td>defaultOpen</td>
        <td>是否默认展开下拉菜单</td>
        <td>boolean</td>
        <td>-</td>
    </tr>
    <tr>
        <td>defaultValue</td>
        <td>默认选中值</td>
        <td>string | string[] | number | number[]</td>
        <td>-</td>
    </tr>
    <tr>
        <td>value</td>
        <td>指定当前选中的条目，多选时为一个数组。（value 数组引用未变化时，Select 不会更新）</td>
        <td>string | string[] | number | number[]</td>
        <td>-</td>
    </tr>
    <tr>
        <td>disabled</td>
        <td>是否禁用状态</td>
        <td>boolean</td>
        <td>false</td>
    </tr>
    <tr>
        <td>open</td>
        <td>是否展开下拉菜单，推荐配合useState使用</td>
        <td>boolean</td>
        <td>-</td>
    </tr>
    <tr>
        <td>popupMatchSelectWidth</td>
        <td>下拉菜单和选择器同宽。</td>
        <td>boolean</td>
        <td>true</td>
    </tr>
    <tr>
        <td>destroyOnHide</td>
        <td>下拉菜单在隐藏时是否销毁</td>
        <td>boolean</td>
        <td>true</td>
    </tr>
    <tr>
        <td>getPopupContainer</td>
        <td>菜单渲染父节点。默认渲染到 body 上</td>
        <td>(triggerNode?: HTMLElement) => string;</td>
        <td>() => 'body'</td>
    </tr>
    <tr>
        <td>loading</td>
        <td>加载中状态</td>
        <td>boolean</td>
        <td>false</td>
    </tr>
    <tr>
        <td>maxTagCount</td>
        <td>多选模式下最多显示多少个tag，响应式模式会对性能产生损耗</td>
        <td>number | 'responsive'</td>
        <td>-</td>
    </tr>
    <tr>
        <td>showSearch</td>
        <td>配置是否可搜索</td>
        <td>boolean</td>
        <td>false</td>
    </tr>
    <tr>
        <td>filterOption</td>
        <td>根据输入项进行筛选，当 option项 符合筛选条件时，应返回 true，反之则返回 false</td>
        <td>(inputValue, option) => boolean</td>
        <td>option.label.indexOf(inputValue) !== -1</td>
    </tr>
    <tr>
        <td>filterSort</td>
        <td>搜索时对筛选结果项的排序函数, 类似Array.sort里的 compareFunction</td>
        <td>(optionA: Option, optionB: Option) => number</td>
        <td>-</td>
    </tr>
    <tr>
        <td>placement</td>
        <td>选择框弹出的位置</td>
        <td>'bottomLeft' | 'bottomRight' | 'topLeft' | 'topRight'</td>
        <td>bottomLeft</td>
    </tr>
    <tr>
        <td>size</td>
        <td>控件大小</td>
        <td>`large` | `middle` | `small`</td>
        <td>`middle`</td>
    </tr>
    <tr>
        <td>onSearch</td>
        <td>搜索时文本框值变化时回调</td>
        <td>(value: string) => void</td>
        <td>-</td>
    </tr>
    <tr>
        <td>onSelect</td>
        <td>选中option时调用此函数</td>
        <td>(option: Option) => void</td>
        <td>-</td>
    </tr>
    <tr>
        <td>onDeselect</td>
        <td>取消选中option时调用此函数</td>
        <td>(option: Option) => void</td>
        <td>-</td>
    </tr>
    <tr>
        <td>onClear</td>
        <td>清除内容时回调</td>
        <td>() => void</td>
        <td>-</td>
    </tr>
    <tr>
        <td>onDropdownVisibleChange</td>
        <td>展开下拉菜单的回调</td>
        <td>(open: boolean) => void</td>
        <td>-</td>
    </tr>
    <tr>
        <td>onFocus</td>
        <td>获得焦点时的回调</td>
        <td>() => void</td>
        <td>-</td>
    </tr>
    <tr>
        <td>onPopupScroll</td>
        <td>下拉列表滚动时的回调(position参数在虚拟滚动时才有值)</td>
        <td>(event: MouseEvent, position?: Position) => void</td>
        <td>-</td>
    </tr>
    </tbody>
</table>

### Methods
> 以上所有组件都支持
<table className="api-table">
    <thead>
    <tr>
        <th>名称</th>
        <th>说明</th>
        <th>参数</th>
    </tr>
    </thead>
    <tbody>
    <tr>
        <td>blur</td>
        <td>取消焦点</td>
        <td>-</td>
    </tr>
    <tr>
        <td>focus</td>
        <td>获取焦点</td>
        <td>-</td>
    </tr>
    </tbody>
</table>
